<template>
	<view>
		<view class="head">
			<view class="head_title">
				<view>订单搜索</view>
				<view class="head_font1">REAL TIME DATE OVERVIEW</view>
			</view>
			<view class="head_search">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{array[index]}}</view>
				</picker>
			</view>
		</view>
		<view class="main1">
			<view>
				<view>车主姓名：</view>
				<input placeholder-style="color: rgba(172, 172, 172, 1);" type="text" placeholder="请输入姓名" />
			</view>
			<view>
				<view>车主手机号：</view>
				<input placeholder-style="color: rgba(172, 172, 172, 1);" type="text" placeholder="请输入手机号" />
			</view>
			<view>
				<view>车牌号码：</view>
				<input placeholder-style="color: rgba(172, 172, 172, 1);" type="text" placeholder="请输入车牌号" />
			</view>
			<view>
				<view>批量查询：</view>
				<view class="date">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
			<view class="main1_btn">
				<view>查询</view>
				<view class="reset_btn">重置</view>
			</view>
		</view>
		<view class="main2">
			<view>
				<image src="../../static/logo.png" mode=""></image>
				<view>当前共查询到 1 个订单记录</view>
			</view>
			<image src="../../static/logo.png" mode=""></image>
		</view>
		<view class="list_car">
			<view>
				<view>类型：</view>
				<view>事故</view>
			</view>
			<view>
				<view>订单编号：</view>
				<view>xxxxxxxxxxxxx</view>
			</view>
			<view>
				<view>客户：</view>
				<view>xxxxxxxxxxxxxxxxxx</view>
			</view>
			<view>
				<view>门店：</view>
				<view>xxxxxxxxxxx</view>
			</view>
			<view>
				<view>救援人员：</view>
				<view>xxxxxxx</view>
			</view>
			<view>
				<view>状态：</view>
				<view>xxxxxxx</view>
			</view>
			<view>
				<view>产值：</view>
				<view>xxxxxxxxxx</view>
			</view>
			<view>
				<view>满意度：</view>
				<view>xxxxxxxxxxxxxxxx</view>
			</view>
			<view>
				<view>年卡类型：</view>
				<view>xxxxxxxxxxx</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				array: ['中国', '美国', '巴西', '日本'],
				date: currentDate,
			}
			const currentDate = this.getDate({
				format: true
			})
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		mounted() {
			console.log(this.date)
			if(!this.date){
				this.date = '请选择日期'
			}
		},
		methods: {
			getDate:function(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
		}
	}
</script>

<style>
	.list_car>view :nth-child(1){
		width: 140rpx;
		margin-right: 30rpx;
	}
	.list_car>view{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 20rpx;
		
	}
	.list_car{
		width: calc(100% - 60rpx);
		border-radius: 10rpx;
		color: rgba(16, 16, 16, 1);
		font-size: 28rpx;
		font-family: Arial;
		border: 2rpx solid rgba(95, 172, 255, 1);
		margin: 0 auto;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 100rpx;
	}
	.main2>image{
		width: 30rpx;
		height: 30rpx;
	}
	.main2>view>image{
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		margin-right: 12rpx;
	}
	.main2>view{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.main2{
		width: calc(100% - 60rpx);
		height: 64rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		background-color: rgba(230, 247, 254, 1);
		border: 2rpx solid rgba(184, 226, 253, 1);
		margin-bottom: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 34rpx 0 20rpx;
		box-sizing: border-box;
		color: rgba(172, 172, 172, 1);
		font-size: 20rpx;
		font-family: Arial;
	}
	.reset_btn{
		margin-left: 12rpx;
		border-radius: 10rpx;
		background-color: rgba(255, 255, 255, 0);
		border: 2rpx solid rgba(172, 172, 172, 1);
		background-color: #FFFFFF !important;
		color: #000000 !important;
	}
	.main1_btn>view{
		width: 92rpx;
		height: 48rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(255, 255, 255, 1);
		font-size: 20rpx;
		font-family: Arial;
		background-color: #258FFB;
		border-radius: 10rpx;
	}
	.main1_btn{
		margin-bottom: 0 !important;
		display: flex;
		justify-content: flex-end !important;
		align-items: center;
	}
	.date{
		width: calc(100% - 160rpx) !important;
		height: 40rpx;
		border-radius: 10rpx;
		color: rgba(16, 16, 16, 1);
		font-size: 28rpx;
		font-family: Arial;
		border: 1rpx solid rgba(224, 224, 224, 1);
		padding: 0 20rpx;
		box-sizing: border-box;
		color: rgba(172, 172, 172, 1);
		font-size: 18rpx;
		font-family: Arial;
		line-height: 40rpx;
	}
	.main1>view>input {
		width: calc(100% - 160rpx);
		height: 40rpx;
		border-radius: 10rpx;
		color: rgba(16, 16, 16, 1);
		font-size: 28rpx;
		font-family: Arial;
		border: 1rpx solid rgba(224, 224, 224, 1);
		padding: 0 20rpx;
		box-sizing: border-box;
		color: rgba(172, 172, 172, 1);
		font-size: 18rpx;
		font-family: Arial;
	}

	.main1>view>view {
		width: 160rpx;
	}

	.main1>view {
		margin-bottom: 20rpx;
		color: rgba(34, 29, 26, 1);
		font-size: 20rpx;
		font-family: Arial;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.main1 {
		width: calc(100% - 60rpx);
		border-radius: 10rpx;
		color: rgba(16, 16, 16, 1);
		font-size: 24rpx;
		font-family: Arial;
		border: 1rpx solid rgba(95, 172, 255, 1);
		margin: 0 auto;
		padding: 32rpx 20rpx 22rpx 20rpx;
		box-sizing: border-box;
		margin-bottom: 46rpx;
	}

	.head_search {
		width: 280rpx;
		height: 36rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		box-sizing: border-box;
		color: rgba(62, 135, 255, 1);
		font-size: 20rpx;
		font-family: Microsoft Yahei;
		border: 1rpx solid rgba(62, 135, 255, 1);
		border-radius: 20rpx;
	}

	.head_font1 {
		color: rgba(119, 120, 132, 1);
		font-size: 28rpx;
		font-family: PingFangSC-regular;
	}

	.head_title {
		color: rgba(14, 16, 13, 1);
		font-size: 36rpx;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	.head {
		padding: 40rpx 26rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
</style>
